<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('pay')" />
</head>
<body id="checkstand-body">
    <input id="jsonStr" type="text" class="form-control" th:value="${jsonStr}" hidden="hidden">
<!--    <button id="rzp-button1">Pay</button>-->

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: datetimepicker-js" />
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
    <script>
        $(function() {
            console.log($("#jsonStr").val());
            $("#checkstand-body").html($("#jsonStr").val())
        });
        var options = {
            "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Dashboard
            "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
            "currency": "INR",
            "name": "Acme Corp",
            "description": "Test Transaction",
            "image": "https://example.com/your_logo",
            "order_id": "order_9A33XWu170gUtm", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
            "callback_url": "https://eneqd3r9zrjok.x.pipedream.net/",
            "prefill": {
                "name": "Gaurav Kumar",
                "email": "gaurav.kumar@example.com",
                "contact": "9999999999"
            },
            "notes": {
                "address": "Razorpay Corporate Office"
            },
            "theme": {
                "color": "#3399cc"
            }
        };
        var rzp1 = new Razorpay(options);
        document.getElementById('rzp-button1').onclick = function(e){
            rzp1.open();
            e.preventDefault();
        }
    </script>
</body>
</html>